<template lang="pug">
  .choosePage
    .content
        img(src="static/image/bpx.png" @click="changePage('bpx')" @mouseenter='show' @mouseleave="leave" style='margin-bottom: 50px; cursor:pointer;')
        img(src="static/image/usdt.png" @click="changePage('ustd')" @mouseenter='show1' @mouseleave="leave1" style='cursor:pointer;')
    .bpxHidden
      span BPX区：
      p 本区域为BPX区，BPX为布勒旗下一款数字货币，可通过BPX来进行游戏。 
    .usdtHidden
      span USDT区：
      p 本区域为USDT区，USDT为一款数字货币，可通过USDT来进行游戏。       
  //
</template>
<script>
import $ from "jquery";
export default {
  name: "choosePage",
  data() {
    return {
      alchemyIsOpen: 1,
      ginsenIsOpen: 1,
      flag: false
    };
  },
  mounted() {
    this.$parent.flag1 = false;
    this.$parent.flag2 = false;
    $(".choosePage").height($(window).height());
    $(window).resize(function() {
      $(".choosePage").height($(window).height());
    });
  },
  created() {},
  methods: {
    changePage(d) {
      u.coinType(data => {
        if (data && data[0].code == "200") {
          let id;
          if (d === "bpx") {
            data[0].data.some(el => {
              el.type === "BPX" ? (id = el.id) : "";
            });
            localStorage.setItem("cointype", id);
          } else if (d === "ustd") {
            data[0].data.some(el => {
              el.type == "USDT" ? (id = el.id) : "";
            });
            localStorage.setItem("cointype", id);
          }
          u.coinTypetax({ id: id + "" }, data => {
            if (data && data[0].code == "200") {
              data[0].data.bitype = "矿石";
              u.setStore("winning", data[0].data);
              u.setStore(
                "mount",
                data[0].data.seeds_amount * data[0].data.gold +
                  data[0].data.silver_seeds_amount * data[0].data.silver +
                  data[0].data.copper_seeds_amount * data[0].data.copper
              );
              u.isPlay(data => {
                if (data && data[0].code == 200) {
                  this.alchemyIsOpen = data[0].data.alchemyIsOpen;
                  this.ginsenIsOpen = data[0].data.ginsenIsOpen;
                  this.flag = true;
                }
                if (this.$route.params.id == 1) {
                  switch (parseInt(this.alchemyIsOpen)) {
                    case 0:
                      // alert("游戏暂时未开放");
                      this.$parent.loading({
                        message: "游戏暂时未开放",
                        type: false
                      });
                      break;
                    case 1:
                      this.$router.push({ path: "/seed/2" });
                      break;
                    case 2:
                      // alert("游戏正在维护");
                      this.$parent.loading({
                        message: "游戏正在维护",
                        type: false
                      });
                      break;
                  }
                } else {
                  switch (parseInt(this.ginsenIsOpen)) {
                    case 0:
                      this.$parent.loading({
                        message: "游戏暂时未开放",
                        type: false
                      });
                      break;
                    case 1:
                      this.$router.push({ path: "/indexstart" });
                      break;
                    case 2:
                      this.$parent.loading({
                        message: "游戏正在维护",
                        type: false
                      });
                      break;
                  }
                }
              });
            }
          });
        }
      });
    },
    game() {},
     show(){
      $('.bpxHidden').css({'display':'block'})
    },
    leave(){
      $('.bpxHidden').css({'display':'none'})
    },
    show1(){
      $('.usdtHidden').css({'display':'block'})
    },
    leave1(){
      $('.usdtHidden').css({'display':'none'})
    },
  },
  components: {}
};
</script>
<style lang="stylus" scoped>
.choosePage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 1200px;
  min-height: 800px;
  background-image: url('../../static/image/ginsengbg2.png');
  background-size: 100% 100%;

  .content {
    display: flex;
    justify-content: center;
    flex-direction: column;

    .btn {
      width: 150px;

      &:first-child {
        margin-right: 180px;
      }

      img {
        width: 100%;
        height: auto;
        cursor: pointer;
      }

      p {
        margin-top: 30px;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 1px rgba(126, 61, 3, 0.8);
        text-shadow: 0 2.5px #916313, 2px 0 #916313, -2px 0 #916313, 0 -2px #916313;
      }
    }
  }
  .bpxHidden,.usdtHidden{
    display:none;
    width: 432px;
    height: 138px;
    background-image: url('../../static/image/borderOpacity1.png');
    background-size: 100% 100%;
    position: absolute;
    bottom: 50%;
    left: 59%;
    padding: 26px 26px;
    span {
      font-size:16px;
      color : #7f5200;
      font-family:"MicrosoftYaHei"; 
      font-weight:bold;
    }
    p{
      font-size:16px;
      color : #7f5200;
      font-family:"MicrosoftYaHei";
      line-height: 30px; 
    }
  }
  .usdtHidden{
    bottom: 35%!important;
  }
   @media (min-width: 1280px) {
 .bpxHidden{
   bottom: 50%!important;
    left: 62%!important;
 }
 .usdtHidden{
    left: 62%!important;
    bottom: 30%!important;
  }
} 
   @media (min-width: 1366px) {
 .bpxHidden{
   bottom: 50%!important;
    left: 62%!important;
 }
 .usdtHidden{
    left: 62%!important;
    bottom: 30%!important;
  }
} 
  @media (min-width: 1440px) {
 .bpxHidden{
   bottom: 50%!important;
    left: 61%!important;
 }
 .usdtHidden{
    left: 61%!important;
    bottom: 30%!important;
  }
} 
  @media (min-width: 1680px) {
 .bpxHidden{
   bottom: 50%!important;
    left: 59%!important;
 }
 .usdtHidden{
    left: 59%!important;
   bottom: 35%!important;
  }
} 
@media (min-width: 1920px) {
 .bpxHidden{
     bottom: 50%!important;
    left: 59%!important;
 }
 .usdtHidden{
   left: 59%!important;
   bottom: 35%!important;
  }
} 
}
</style>
